<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="交易服务包"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <img class="banner" src="../../assets/orderbanner02.png" alt="" />
    <div class="card">
      <div class="tword">交易服务包</div>
      <div><span>签订意向合同</span></div>
      <div><span>支付意向定金</span></div>
      <div><span>网签合同+首付</span></div>
      <div>
        <span style="margin-right: 2px">申税完税</span>
        <span style="margin-left: 2px">产权过户</span>
      </div>
      <div class="bword">交易服务包涵盖以上服务内容</div>
    </div>
    <div class="tipw">请根据您的购买进程购买所需服务</div>
    <div class="cell">
      <div>
        房源编号<span @click="showhouselist = true">选择房源</span>
      </div>
      <div>
        <input
          type="text"
          @input="getdata"
          v-model="houseSn"
          placeholder="请输入"
        />
      </div>
    </div>
    <div class="cell">
      <div>期望服务时间</div>
      <div @click="showtime = true">{{ time }}</div>
    </div>
    <div class="money">
      <div>
        <div>请输入房屋签约总价</div>
        <div class="intpart">
          <input v-model="allmoney" type="number" /><span>万</span>
        </div>
      </div>
      <div class="chen" style="font-size: 20px">*</div>
      <div>
        <div>服务费比例</div>
        <div class="proportion">{{ transactionService }}%</div>
      </div>
    </div>
    <div class="showword">
      <div>*如未最终成交可申请部分退款</div>
      <div>
        *请按实际金额填写，核查不符经纪人将停止服务，由此造成损失将由您承担
      </div>
    </div>
    <div class="cut"></div>
    <div class="btnpart">
      <div class="cheak">
        <van-checkbox
          shape="square"
          icon-size="14px"
          checked-color="#45b7cb"
          v-model="checked"
          style="margin-right: 5px"
        />
        <span
          >我已阅读并同意<span @click="toagreement" class="xy"
            >《不动产交易服务代购买协议》</span
          ></span
        >
      </div>
      <div class="btn">
        <div class="pay">
          ￥<span>{{ money.toFixed(2) }}</span>
        </div>
        <div>
          <button @click="call">咨询客服</button>
          <button @click="buy">立即购买</button>
        </div>
      </div>
      <div class="safe"></div>
    </div>

    <van-popup
      position="bottom"
      :style="{ height: '40%' }"
      v-model="showtime"
      @close="onclosetime"
    >
      <van-datetime-picker
        @cancel="onclosetime"
        @confirm="onchoosetime"
        type="datehour"
        title="选择服务时间"
        :min-date="minDate"
      />
    </van-popup>
    <van-popup v-model="showhouselist" style="border-radius: 15px;">
      <div class="popupdiv">
        <div class="ftip">点击房源获取房源编号</div>
        <div
          v-for="(item, index) in buyhouselist"
          @click="gethouseSn(item.houseSn)"
          :key="index"
          class="house"
        >
          <img :src="item.houseImage" />
          <div class="intrduce">
            <div class="title1">{{ item.subdistrict }}</div>
            <div class="title2">
              <span>{{ item.houseType }}</span
              >|<span>{{ item.coveredArea }}m<span class="up">2</span></span
              >|<span>{{ item.floor }}</span>
            </div>
            <div class="tips">
              <span v-show="item.aspectType">{{ item.aspectType }}</span>
              <span v-show="item.decoration">{{ item.decoration }}</span>
              <span v-show="item.houseGenre">{{ item.houseGenre }}</span>
            </div>
            <div v-show="item.listedPrice != '面议'" class="title3">
              {{ item.listedPrice }}万<span>
                <span
                  >{{
                    ((item.listedPrice * 10000) / item.coveredArea).toFixed(2)
                  }} </span
                >元/m<span class="up">2</span></span
              >
            </div>
            <div v-show="item.listedPrice == '面议'" class="title3">
              {{ item.listedPrice }}
            </div>
          </div>
        </div>
        <div v-show="buyhouselist.length == 0" class="nohouse">
          <img src="../../assets/nohouse.png" alt="" />
          <div>暂无浏览数据</div>
        </div>
      </div>
    </van-popup>
    <van-overlay z-index="200" :show="showsuccess">
      <div class="wrapper">
        <div class="paysuccess">
          <van-icon size="70px" name="checked" />
          <div>
            交纳成功，<span>{{ time2 }}</span
            >秒后自动跳转
          </div>
          <button @click="back">跳转</button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getBuyhouseService } from "../../apis/house.js";
import { createService, paySign } from "../../apis/buy.js";
import local from "../../utils/local.js";
import { getHouseListBuy } from "@/utils/auth";
export default {
  data() {
    return {
      radio: "1",
      checked: false,
      checkedpri: false,
      value1: 1,
      value2: 1,
      allmoney: null,
      money: 0,
      showtime: false,
      time: "请选择",
      showhouselist: false,
      buyhouselist: [],
      houseSn: "",
      houseId: "",
      transactionService: "0.3",
      minDate: new Date(),
      timestamp: "",
      time2: 3,
      timer: "",
      showsuccess: false,
    };
  },
  created() {
    if (window.plus) {
      setTimeout(this.plusReady, 0);
    } else {
      document.addEventListener("plusready", this.plusReady, false);
    }
    this.buyhouselist = getHouseListBuy();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    call() {
      window.location.href = "tel:400-000-7173";
    },
    plusReady() {
      let _this = this;
      plus.payment.getChannels((channels) => {
        for (let i in channels) {
          if (channels[i].id == "wxpay") {
            _this.wxChannel = channels[i];
          }
        }
      });
    },
    gethouseSn(hSn) {
      this.houseSn = hSn;
      this.showhouselist = false;
      this.getdata();
    },
    getdata() {
      getBuyhouseService({ houseSn: this.houseSn }).then((res) => {
        if (res.code == 201 || res.code == 200) {
          this.houseId = res.result.houseId;
          this.allmoney = res.result.listedPrice;
          this.transactionService = res.result.transactionService;
          // if (res.result != []) {
          //   this.houseId = res.result.houseId;
          //   this.allmoney = res.result.listedPrice;
          //   // this.transactionService = res.result.transactionService;
          //   this.transactionService = "0.3";
          // } else {
          //   this.houseId = "";
          //   this.allmoney = null;
          //   this.transactionService = "0.3";
          // }
        }
      });
    },
    toagreement() {
      this.$router.push({ path: "/buyagreement" });
    },
    buy() {
      let _this = this;
      if (this.checked) {
        if (this.houseSn == "") {
          this.$toast("请填写房源编号");
        } else if (this.time == "请选择") {
          this.$toast("请选择服务时间");
        } else {
          if (this.money == "0") {
            this.$toast("请填写正确的房源编号");
          } else {
            createService({
              houseId: this.houseId,
              description: "交易服务",
              total: this.money,
              expectedTime: this.timestamp,
              serveCate: "3",
            }).then((res) => {
              console.log(res);
              paySign({ type: "1", orderId: res.result.orderId }).then(
                (rep) => {
                  console.log(rep);
                  if (rep.code == 201) {
                    plus.payment.request(
                      _this.wxChannel,
                      JSON.stringify(rep.result),
                      function (result) {
                        console.log(result);
                        _this.showsuccess = true;
                        _this.timer = setInterval(() => {
                          _this.time2--;
                          if (_this.time2 == 0) {
                            _this.$router.go(-1);
                            clearInterval(_this.timer);
                          }
                        }, 1000);
                      },
                      function () {
                        _this.$toast("支付失败");
                      }
                    );
                  } else {
                    _this.$toast("下单失败");
                  }
                }
              );
            });
          }
        }
      } else {
        this.$toast("请阅读并勾选下方协议");
      }
    },
    formatDate(date) {
      return `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()}-${date.getHours()}:00`;
    },
    onclosetime() {
      this.showtime = false;
    },
    onchoosetime(value) {
      this.timestamp = (value.getTime() / 1000).toString();
      this.time = this.formatDate(value);
      this.showtime = false;
    },
  },
  beforeUpdate() {
    if (this.allmoney) {
      this.money = this.allmoney * this.transactionService * 100;
    } else {
      this.money = 0;
    }
  },
};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
}
.card {
  margin: 10px 15px;
  box-shadow: 0px 0px 5px 5px #eee;
  text-align: center;
  display: flex;
  flex-direction: column;
  > div {
    margin-bottom: 10px;
  }
  .tword {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    padding: 15px 0;
  }
  .bword {
    font-size: 12px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
  span {
    border-radius: 15px;
    padding: 4px 16px;
    display: inline-block;
    font-size: 14px;
    background-color: #89ddc9;
    color: #fff;
  }
}
.tipw {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin: 15px 0;
}
.money {
  padding: 20px 50px;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  color: #333;
  font-weight: bold;
  align-items: center;
  > div {
    height: 47px;
  }
  .chen {
    line-height: 70px;
  }
  .intpart {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin: 0 auto;
    width: 98px;
    border: 1px solid #45b7cb;
    color: #45b7cb;
    margin-top: 5px;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    input {
      border: none;
      width: 100%;
    }
  }
  .proportion {
    text-align: center;
    margin-top: 5px;
    border-radius: 5px;
    padding: 7px 5px;
    color: #999;
    background-color: #ccc;
    font-size: 16px;
    width: 100px;
  }
}
.showword {
  margin: 0 15px;
  font-size: 12px;
  color: #999;
  & > div {
    margin-bottom: 10px;
  }
}
.cell {
  margin: 0 15px;
  padding: 15px 10px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  color: #333;
  font-size: 16px;
  > div {
    &:first-child {
      font-weight: bold;
      span {
        display: inline-block;
        margin-left: 5px;
        font-size: 12px;
        font-weight: normal;
        color: #45b7cb;
      }
    }
  }
  input {
    color: #333;
    border: none;
    width: 32vw;
    min-width: 105px;
    text-align: right;
    padding: 0;
    height: 100%;
    &::placeholder {
      color: #333;
    }
  }
}
.cut {
  height: 15vh;
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 5px 0 0;
  border-top: 2px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  .cheak {
    height: 20px;
    display: flex;
    align-items: center;
    margin: 5px 15px;
    font-size: 11px;
    color: #333;
    .xy {
      color: #45b7cb;
    }
  }
  .btn {
    padding: 5px;
    // margin: 5px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pay {
      color: #d43b33;
      font-size: 16px;
      span {
        font-weight: bold;
        font-size: 24px;
      }
    }
    button {
      border: none;
      border-radius: 20px;
      height: 40px;
      line-height: 40px;
      width: 22vw;
      min-width: 70px;
      color: #fff;
      font-size: 14px;
      &:first-child {
        background-color: #fff;
        color: #999;
        border: 1px solid #999;
        margin-right: 2vw;
      }
      &:last-child {
        background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
      }
    }
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.popupdiv {
  background-color: #fff;
  width: 320px;
  min-height: 200px;
  max-height: 400px;
  border-radius: 15px;
  .ftip {
    padding-top: 10px;
    text-align: center;
    color: #333;
    font-size: 18px;
    font-weight: bold;
  }
  .house {
    padding: 15px 10px;
    background-color: #fff;
    display: flex;
    border-bottom: 1px solid #f1f1f1;
    img {
      width: 120px;
      height: 110px;
    }
    .intrduce {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      width: 190px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .title1 {
        font-size: 16px;
        font-weight: 550;
        color: #333333;
      }
      .title2 {
        font-size: 12px;
        color: #a0a0a0;
        span {
          margin: 0 2px;
        }
      }
      .tips {
        span {
          font-size: 10px;
          display: inline-block;
          margin-right: 5px;
          padding: 0px 2px;
          border: 1px solid #45b7cb;
          color: #45b7cb;
        }
      }
      .title3 {
        color: #d43b33;
        font-size: 16px;
        font-weight: bold;
        span {
          color: #999;
          font-size: 12px;
          margin-left: 6px;
        }
      }
    }
  }
  .up {
    margin: 0px !important;
    font-size: 12px;
    vertical-align: super;
    transform: scale(calc(10 / 12));
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin: 0 15px;
  padding-bottom: 30px;
  img {
    margin-top: 20px;
    width: 150px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.paysuccess {
  padding: 25px 40px;
  background-color: #fff;
  text-align: center;
  color: #45b7cb;
  > div {
    margin-top: 10px;
    color: #333;
    span {
      color: #45b7cb;
    }
  }
  button {
    margin-top: 15px;
    background-color: #fff;
    border: 1px solid #45b7cb;
    padding: 3px 15px;
    border-radius: 15px;
  }
}
</style>
